<!doctype html>
<html lang="en">
  <head>
    <title>国大诊所-首页</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body style="background-image:url(test.jpg) ">
    <div id = "app"></div>
     <nav class="navbar navbar-expand-sm navbar-dark bg-primary">
        <a class="navbar-brand" href="#">国大诊所
        <img src="https://img0.baidu.com/it/u=4281977285,1094228893&fm=253&fmt=auto&app=138&f=JPEG?w=542&h=500" width="20px" height="20px"></a> 
    
        <div class="collapse navbar-collapse" id="collapsibleNavId">

            <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                <!-- 一个选项就是一个li标签 -->
                <li class="nav-item active ml-5">
                    <a class="nav-link" href="#">医院概况 <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item active ml-5">
                    <a class="nav-link" href="#">医学教育</a>
                </li>
                <li class="nav-item active ml-5">
                    <a class="nav-link" href="#">科室分布</a>
                </li>
                <li class="nav-item active ml-5">
                    <a class="nav-link" href="#">优秀校友</a>
                </li>
                <li class="nav-item active ml-5">
                  <a class="nav-link" href="#">优秀校友</a>
                </li>
                <li class="nav-item active ml-5">
                <a class="nav-link" href="#">优秀校友</a>
                </li>
                <!-- 有下拉选项的 -->
                <li class="nav-item dropdown active ml-5">
                    <a class="nav-link dropdown-toggle" href="#" id="dropdownId" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">功能导航</a>
                    <!-- 下拉选项的值 -->
                    <div class="dropdown-menu" aria-labelledby="dropdownId">
                        <a class="dropdown-item" href="#">预约挂号+</a>
                        <a class="dropdown-item" href="#">查找病历+</a>
                        <a class="dropdown-item" href="#">医师介绍+</a>
                        <a class="dropdown-item" href="#">位置查询+</a>
                    </div>
                </li>
            </ul>

            
            <!-- <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="text" placeholder="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form> -->
          </div>
        
    </nav>


        <div class="container" id="app">
          <div class="row">

           
              <style>
                body{
                         margin: 0;
                         padding: 0;
                         font-family: sans-serif;
                         background: url(https://www.xiangya.com.cn/images/ydy/a1.jpg)
         
                         no-repeat center 0px;
                         background-size: cover;
                         background-position: center 0; 
                         background-repeat: no-repeat;  
                         background-attachment: fixed; 
         
                 } 
             </style>


             
                          
            </div>
            <!-- 左边 -->
            <!-- <dic class="col-md-8 col-12"> -->
            <!-- 右边 -->
            <div class="col-md-8 col-12">
                <h1 class="lead">国大名医介绍</h1>
                <!-- 卡片b4-card-grid -->
                <!-- <div class="row">
                  <div class="col-md-3 col-sm-5 col-6 mb-3">
                    <div class="card">
                      <img src="https://img2.baidu.com/it/u=2213185174,1474348713&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500" width="100%" height="200px"/>
                      <div class="card-body text-center">
                        <h3 class="card-title">王神医</h3>
                        <p class="card-text">中华第一神医</p>
                        <p class="card-text">内科</p> 
                      </div>
                      <button type="button" class="btn btn-outline-danger">
                        <a href="doctorwang.html">预约</a>
                      </button>
                    </div>
                  </div>

                  <div class="col-md-3 col-sm-5 col-6 mb-3">
                    <div class="card">
                      <img src="https://img2.baidu.com/it/u=2213185174,1474348713&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500" width="100%" height="200px"/>
                      <div class="card-body text-center">
                        <h3 class="card-title">王神医</h3>
                        <p class="card-text">中华第一神医</p>
                      </div>
                      <button type="button" class="btn btn-outline-danger">
                        <a href="doctorwang.html">预约</a>
                      </button>
                    </div>
                  </div>

                  <div class="col-md-3 col-sm-5 col-6 mb-3">
                    <div class="card">
                      <img src="https://img2.baidu.com/it/u=2213185174,1474348713&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500" width="100%" height="200px"/>
                      <div class="card-body text-center">
                        <h3 class="card-title">王神医</h3>
                        <p class="card-text">中华第一神医</p>
                      </div>
                      <button type="button" class="btn btn-outline-danger">
                        <a href="doctorwang.html">预约</a>
                      </button>
                    </div>
                  </div>

                  <div class="col-md-3 col-sm-5 col-6 mb-3">
                    <div class="card">
                      <img src="https://img2.baidu.com/it/u=2213185174,1474348713&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500" width="100%" height="200px"/>
                      <div class="card-body text-center">
                        <h3 class="card-title">王神医</h3>
                        <p class="card-text">中华第一神医</p>
                      </div>
                      <button type="button" class="btn btn-outline-danger">
                        <a href="doctorwang.html">预约</a>
                      </button>
                    </div>
                  </div>

                  <div class="col-md-3 col-sm-5 col-6 mb-3">
                    <div class="card">
                      <img src="https://img2.baidu.com/it/u=2213185174,1474348713&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500" width="100%" height="200px"/>
                      <div class="card-body text-center">
                        <h3 class="card-title">王神医</h3>
                        <p class="card-text">中华第一神医</p>
                      </div>
                      <button type="button" class="btn btn-outline-danger">
                        <a href="doctorwang.html">预约</a>
                      </button>
                    </div>
                  </div>

                  <div class="col-md-3 col-sm-5 col-6 mb-3">
                    <div class="card">
                      <img src="https://img2.baidu.com/it/u=2213185174,1474348713&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500" width="100%" height="200px"/>
                      <div class="card-body text-center">
                        <h3 class="card-title">王神医</h3>
                        <p class="card-text">中华第一神医</p>
                      </div>
                      <button type="button" class="btn btn-outline-danger">
                        <a href="doctorwang.html">预约</a>
                      </button>
                    </div>
                  </div>

                  <div class="col-md-3 col-sm-6">
                    <div class="card">
                      <img src="https://img1.baidu.com/it/u=4099665005,1041495993&fm=253&fmt=auto&app=138&f=JPEG?w=459&h=617" width="100%" height="200px"/>
                      <div class="card-body text-center">
                        <h3 class="card-title">周神医</h3>
                        <p class="card-text">中华第二神医</p>
                      </div>
                      <button type="button" class="btn btn-outline-danger">
                        <a href="doctorzhou.html">预约</a>
                      </button>
                    </div>
                  </div>

                  <div class="col-md-3 col-sm-6">
                    <div class="card">
                      <img src="https://img0.baidu.com/it/u=4179035412,2799287675&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=642" width="100%" height="200px"/>
                      <div class="card-body text-center">
                        <h3 class="card-title">彭护士长</h3>
                        <p class="card-text">中华第三神医</p>
                      </div>
                      <button type="button" class="btn btn-outline-danger">
                        <a href="https://www.baidu.com/">预约</a>
                      </button>
                    </div>
                  </div>

                </div> -->
                <div class="row">
                  <!-- 占的列 遍历所有的医生，得到医生的对象-->
                  <div class="col-md-3 col-sm-6 col-6 mb-3" 
                  v-for="(doc, index) in doctor" :key="index">
                      <div class="card">
                          <!-- 添加一个图片 -->
                          <img :src="doc.img" width="100%" height="130px"/>
                          <div class="card-body text-center">
                              <h3 class="card-title">{{doc.name}}</h3>
                              <p class="card-text">{{doc.level}}</p>
                              <p class="card-text">{{doc.department.title}}</p>
                          </div>
                          <!-- 点击挂号的时候，传递一个医生对象 -->
                          <a @click="getDoctor(doc)" type="button" class="btn btn-outline-danger">挂号</a>
                      </div>
                  </div>
                </div>

                
            </div>
        </div>
      </div>
          <!-- 页脚&网址地图 -->
        <div class="jumbotron jumbotron-fluid mb-0 mt-3 py-1">
          <div class="container">
              <p class="lead text-center">国大诊所@2022</p>
          </div>
        </div>
    </div>
          
  
        
 
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> 
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>
<script>
    // newvue---快捷
    const vm = new Vue({
        el:"#app", //当前vue对象渲染的页面  //vm.mount("#app")
        data() {
            return {
                title:"国大诊所",
                curDepart:"请选择科室",
                // 部门信息,data
                department:null,  
                //医生信息
                doctor:[]
             }
        },
        mounted() { //生命周期，当data中有数据了，但是我们还没有放到页面上去
            this.setSeesion(this.curDepart);
            this.getallDepartment();  //调用了查询所有的函数
        },
        methods: {
            getDoctor(doctor){
                //将医生信息传递到doctor页面
                sessionStorage.setItem("doctor",JSON.stringify(doctor));
                //跳转到doctor页面
                window.location.href="doctor.html";
            },
            /**查找所有的部门信息
             */ 
            getallDepartment(){
                //查询一般使用get：查询  post 添加  put 修改   delete 删除
                axios.get('http://localhost:80/api/department')
                .then(function (response) {
                    //response表示返回的数据对象，这个里面有很多的内容
                    vm.department = response.data;
                })
                .catch(function (error) {
                    //出现错误会返回一个error
                    console.log(error);
                })
            },
            //设置科室名字到sessionStorage中
            setSeesion(depart){
                sessionStorage.setItem("curDepart",depart);
            },
            //拿到当前科室的id和当前科室的名字
            getCurrDepartment(curdepart){
                //情况上一次查询的部门医生
                this.doctor = [];
                this.curDepart = curdepart.title;
                //修改了当前科室的名字，所以重新设置
                this.setSeesion(JSON.stringify(curdepart));
                //拿到科室的id，通过科室的id找到当前的所有医生
                axios.get(`http://localhost:80/api/doctor/${curdepart.id}`)
                .then((response)=>{
                     //拿到所有的医生
                  
                   this.doctor = response.data;
                })
                .catch(function (error) {
                })
            }
        },
    })

</script>
